<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <style>
        form div{
            height: 40px;
            line-height: 40px;
        }
        form div:nth-child(4){
            height: auto;
        }
        form div span:first-child{
            display: inline-block;
            width: 100px;
        }
    </style>
</head>
<body>
    <div id="app">
        <form action="http://itcast.cn">
            <div>
                <span>姓名：</span>
                <span><input type="text" v-model="uname"></span>
            </div>
            <div>
                <span>性别：</span>
                <span>
                    <input type="radio" id="male" value="1" v-model="gender"> 
                    <label for="male">男</label>
                    <input type="radio" id="female" value="2" v-model="gender">
                    <label for="female">女</label>
                </span>
            </div>
            <div>
                <span>爱好：</span>
                <span>
                    <input type="checkbox" id="ball" v-model="hobby" value="1">
                    <label for="ball">篮球</label>
                    <input type="checkbox" id="sing" v-model="hobby" value="2">
                    <label for="sing">唱歌</label>
                    <input type="checkbox" id="code" v-model="hobby" value="3">
                    <label for="code">写代码</label>
                </span>
            </div>
            <div>
                <span>职业：</span>
                <select v-model="occupation" multiple="true">
                    <option value="0">请选择职业...</option>
                    <option value="1">教师</option>
                    <option value="2">软件工程师</option>
                    <option value="3">律师</option>
                </select>
            </div>
            <div>
                <span>个人简介：</span>
                <textarea v-model="desc"></textarea>
            </div>
            <div>
                <input type="submit" @click.prevent="handle" value="提交" >
            </div>
        </form>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                uname:'李四',
                gender:1,
                hobby:['1','2'],
                // occupation:2
                occupation:['2','3'],
                desc:'你好'
            },
            methods:{
                handle:function(){
                    console.log(this.uname);
                    console.log(this.gender);
                    console.log(this.hobby.toString());
                    console.log(this.occupation);
                    console.log(this.desc);

                }
            }
        })
    </script>
</body>
</html>